<template>
	<view>
		<!-- 导航栏顶部 -->
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
				:back-text-style="{color: '#fff'}" title="意见反馈" back-text="返回">
			</u-navbar>
			<view class="wrap">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item :label-position="labelPosition" label="意见或建议"
					 left-icon="file-text" label-width="250" prop="feedback">
						<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.feedback" />
					</u-form-item>
					<u-form-item :label-position="labelPosition" label-width="200">
						<u-upload
						:before-remove="beforeRemove" 
						ref="uUpload" 
						:custom-btn="false" 
						:show-upload-list="true" 
						:action="uploadFile.url" 
						:formData="uploadFile.formData" 
						:auto-upload="true" 
						:file-list="fileList"
						:show-progress="true" :deletable="true" :max-count="uploadFile.maxCount" @on-list-change="onListChange"
						 @on-success="OnSuccess"/>
					</u-form-item>
				</u-form>
				<u-button size="medium" shape="circle" type="success"
				 :plain="true" ripple @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { policy } from '../../api/uploadFile/upload.js'
	import { feedbackRequest } from '../../api/feedback/feedbackRequest.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				// 背景
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				labelPosition: 'left',
				border: false,
				model: {
					feedback:'',
					url:'',
					userName:'',
					userId:''
				},
				uploadFile: {
					url: '',//后端地址
					maxCount: 9, // 最大上传数
					formData: {} ,// 携带的参数
					name: '' // 上传的文件字段名
				},
				rules: {
					feedback: [{
						required: true,
						message: '给点意见或建议嘛 ^_^',
						trigger: ['change','blur'],
					}],
				},
				errorType: ['message'],
				fileList: [],
				lists: [], // 组件内部的文件列表,
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
			this.getPolicy();
		},
		computed: {
			...mapGetters([
				'name',
				'userID'
			]),
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		methods: {
			// 上传图片之前的钩子函数
			beforeUpload() {
			},
			// 上传成功时返回
			 OnSuccess(){
				this.model.url = this.uploadFile.formData.host + "/" + this.uploadFile.formData.key
			},
			getPolicy() {
				let _self = this;
				policy().then(response => {
					_self.uploadFile.url = response.host
					_self.uploadFile.formData.policy = response.policy;
					_self.uploadFile.formData.signature = response.signature;
					_self.uploadFile.formData.ossaccessKeyId = response.accessid;
					_self.uploadFile.formData.key = response.dir + response.key;
					_self.uploadFile.formData.dir = response.dir;
					_self.uploadFile.formData.host = response.host;
				})
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.model.userName = this.name;
						this.model.userId = this.userID;
						feedbackRequest({feedBack: JSON.stringify(this.model)})
						.then(res => {
							console.log(res);
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							});
							this.model = {}
						})
						.catch(err => {
							console.log(err);
							uni.showToast({
								title: '服务器出现问题了，请稍后再试哦',
								icon: 'none',
								duration: 2000
							});
						})
						
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #000000;
		display: flex;
	}
	.wrap {
		display: flex;
		flex-direction: column;
	}
</style>
